<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" :model="searchScenic" class="demo-form-inline">
      <el-form-item label="景点名称">
        <el-input
          v-model="searchScenic.title"
          placeholder="景点名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="景点地址">
        <el-input v-model="searchScenic.addr" placeholder="景点地址"></el-input>
      </el-form-item>
      <el-form-item label="景点状态">
        <!-- <el-select v-model="searchScenic.status == 0 ? '请选择' : searchScenic.status" placeholder="景点状态">
          <el-option label="正常" value=1></el-option>
          <el-option label="停用" value=2></el-option>
          <el-option label="删除" value=3></el-option>
        </el-select> -->

        <el-select v-model="selectString" value-key="id" @change="changeValue">
          <el-option
            v-for="item in selectArr"
            :label="item.name"
            :key="item.id"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="门票价格">
        <el-input
          type="number"
          v-model="searchScenic.price"
          placeholder="门票价格"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getAllScenic(1)">查询</el-button>
      </el-form-item>
    </el-form>
    <!--表单结束-->

    <!--数据列表-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">{{
          (page - 1) * size + scope.$index + 1
        }}</template>
      </el-table-column>
      <el-table-column prop="title" label="景点名" width="100">
      </el-table-column>
      <el-table-column prop="addr" label="景点地址" width="150">
      </el-table-column>
      <el-table-column prop="price" label="门票" width="50">
        <template slot-scope="scope"> {{ scope.row.price }}元 </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="70">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.status == 1">正常</el-tag>
          <el-tag type="info" v-else-if="scope.row.status == 2">停用</el-tag>
          <el-tag type="danger" v-else>删除</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="playTime" label="游玩时间" width="50">
      </el-table-column>
      <el-table-column prop="openTime" label="开放时间" width="100">
      </el-table-column>
      <el-table-column
        prop="descript"
        label="景点描述"
        width="200"
        row-style="height:20px"
      >
        <template slot-scope="scope">
          <el-input
            :disabled="true"
            type="textarea"
            :rows="5"
            placeholder="景点描述"
            v-model="scope.row.descript"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="culture" label="景点文化" width="150">
        <template slot-scope="scope">
          <el-input
            :disabled="true"
            type="textarea"
            :rows="5"
            placeholder="景点文化"
            v-model="scope.row.culture"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="history" label="景点历史" width="150">
        <template slot-scope="scope">
          <el-input
            :disabled="true"
            type="textarea"
            :rows="5"
            placeholder="景点历史"
            v-model="scope.row.history"
          >
          </el-input>
        </template>
      </el-table-column>
      　　
      <el-table-column label="操作" align="center" min-width="100">
        　　　　<template slot-scope="scope">
          <router-link :to="'/scenic/info/' + scope.row.id">
            　　　　　　<el-button
              type="info"
              @click="checkDetail(scope.row.id)"
              icon="el-icon-message"
              title="查看景点图片"
              circle
            ></el-button>
          </router-link>
          <router-link :to="'/scenic/update/' + scope.row.id">
          　　　　　　<el-button
            type="primary"
            @click="modifyScenic(scope.row.id)"
            icon="el-icon-edit"
            title="编辑景点"
            circle
          ></el-button>
          </router-link>
          　　　　　　<el-button
            type="danger"
            @click="deleteScenic(scope.row.id)"
            icon="el-icon-delete"
            title="删除景点"
            circle
          ></el-button>
          　　　　</template
        >
        　　
      </el-table-column>
    </el-table>
    <!--数据列表结束-->

    <!--分页开始-->
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :current-page="page"
      :page-size="size"
      :total="total"
      style="text-align: center"
      @current-change="getAllScenic"
    >
    </el-pagination>
    <!--分页结束-->
  </div>
</template>

<script>
import scenic from "@/api/travel/scenic/scenic";

export default {
  data() {
    return {
      selectString: "请选择",
      selectArr: [
        { id: 1, name: "正常" },
        { id: 2, name: "停用" },
        { id: 3, name: "删除" },
        { id: 0, name: "全部" },
      ],
      page: 1,
      size: 3,
      searchScenic: {
        title: "",
        addr: "",
        price: null,
        status: null,
      },
      total: 0,
      tableData: [
        {
          id: 2,
          title: "福州三2",
          addr: "福建省福州市鼓楼区道山路附近",
          price: 0,
          playTime: "12",
          openTime: "08:30-20:30",
          culture:
            "由三个坊、七条巷和一条中轴街肆组成，因此自古就被称为“三坊七巷”",
          history:
            "曾先后走出过如严复、陈宝琛、林觉民和林长民等中国近代史上众多名人。",
          descript:
            "三坊七巷是国家5A级旅游景区，是福州老城区经历了建国后的拆迁建设后留存下来的历史街区之一。是福州的历史之源、文化之根、文脉昌盛之地。",
          status: 1,
        },
      ],
    };
  },
  created() {
    //页面渲染前之前
    //调用方法
    this.getAllScenic(1);
  },
  methods: {
    //修改下拉选择
    changeValue(value) {
      console.log(value);
      console.log(this.selectString);
      this.searchScenic.status = value.id;
      console.log(this.searchScenic);
    },
    getAllScenic(page) {
      this.page = page;
      console.log(this.page);
      console.log(this.size);
      console.log(this.searchScenic);
      scenic
        .getScenicList(this.page, this.size, this.searchScenic)
        .then((response) => {
          this.tableData = response.data.data;
          this.total = response.data.total;
        })
        .catch((error) => {
          //请求失败
          console.log(error);
        });
    },
    onSubmit() {
      console.log("submit!");
      console.log(this.searchScenic);
    },
    //删除景点
    deleteScenic(val) {
      console.log(val);
      this.$confirm("此操作将删除该景点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //确定删除
          scenic
            .deleteScenicById(val)
            .then((response) => {
              //删除成功
              //提示删除成功
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //刷新列表
              this.getAllScenic(this.page);
            })
            .catch((error) => {
              //删除失败
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            });
        })
        .catch(() => {
          //取消删除
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      //这里写相应的逻辑，val是指传进来的参数也就是上面的scope.row.phone；也可以是scope.row.nickname等
    },
    //修改景点
    modifyScenic(val) {
      let self = this;
    },
    //查看详情
    checkDetail(val) {
      console.log(val);
    },
  },
};
</script>